<template>
	
	<view class="goods-bar">
		<view class="goods-index-detail" v-for="(items,index) in dataList">
			<view class="dapai-title" @click="productmore(items)">
				<view class="dapai-title-left">
					<image :src="items.brand_logo" mode="widthFix" lazy-load></image>
					<text>{{items.fq_brand_name}}</text>
				</view>
				<view class="dapai-title-right">
					全部
					<text>></text>
				</view>
			</view>
			<view class="dapai-goods">
				<view class="dapai-goods-detail" v-for="(childitem,childindex) in items.items" @click="goodsdetail(childitem)">
					<view class="dapai-goods-detail-image">
						<image :src="childitem.PicLogo" mode="widthFix" lazy-load></image>
					</view>
					<view class="dpsg-title">{{childitem.Title}}</view>
					<view class="dapai-goods-detail-li">
						<text>返{{childitem.Commission}}元</text>
						<text>{{childitem.CouponMoney}}劵</text>
					</view>
					<view class="dapai-goods-detail-price">
						￥<text>{{childitem.EndPrice}}</text>
						<del>￥{{childitem.Price}}</del>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		props:{
			dataList:Array,
			index:Number,
		},
		mounted(){
		},
		methods:{
			
			//大牌详情
			productmore(items){
				uni.navigateTo({
					url: '../goods/dpsg-detail?id='+items.id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			
			//跳转商品详情
			goodsdetail(goods){
				uni.navigateTo({
					url: '../product/product?site='+goods.Site+"&goods_id="+goods.GoodsId,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},		
		}
	}
</script>

<style scoped>
	page{
		background-color: #F5F5F5;
	}
	.goods-bar{
		width:95%;
		margin:10upx auto;
	}
	.goods-index-detail{
		width:96%;
		padding:2%;
		background-color: #FFFFFF;
		margin-bottom:20upx;
	}
	.dapai-title{
		width:100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
		padding:10upx 0;
	}
	.dapai-title-left{
		width:50%;
		line-height:60upx;
		display:inline-block;
	}
	.dapai-title-left>image{
		width:100upx;
		height:60upx;
	}
	.dapai-title-left>text{
		height:60upx;
		line-height:60upx;
		display:inline-block;
		position: relative;
		top:-15upx;
	}
	.dpsg-title{
		white-space: nowrap; /* 因为设置了block，所以需要设置nowrap来确保不换行 */
		overflow: hidden; /* 超出隐藏结合width使用截取采用效果*/
		text-overflow: ellipsis; /* 本功能的主要功臣，超出部分的剪裁方式 */
		-o-text-overflow: ellipsis; /* 特定浏览器前缀 */
		text-decoration: none; /* 无用 */
	}
	.dapai-title-right{
		width:50%;
		text-align:right;
	}
	.dapai-title-right>text{
		padding-left:10upx;
	}
	.dapai-goods{
		width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
		padding:10upx 0;
		border:1px solid #CCCCCC;
		border-radius:30upx;
	}
	.dapai-goods-detail{
		width:31%;
		padding:1%;
	}
	.dapai-goods-detail>view:last-child{
		padding-right:0;
	}
	.dapai-goods-detail-image>image{
		width: 100%;
		height:100upx;
	}
	.dapai-goods-detail-li{
		width: 100%;
		height:50upx;
		line-height:50upx;
		padding:5upx 0;
	}
	.dapai-goods-detail-li>text{
		padding:0 6upx;
		font-size:15upx;
	}
	.dapai-goods-detail-li>text:first-child{
		background-color: #FF3333;
		color:#FFFFFF;
		padding:5upx 5upx;
	}
	.dapai-goods-detail-li>text:last-child{
		border:1px solid #FF3333;
		margin-left:6upx;
		color:#FF3333;
	}
	.dapai-goods-detail-price>text{
		font-size:30upx;
		font-weight:bold;
	}
	.dapai-goods-detail-price>del{
		color:#303133;
		margin-left:10upx;
		font-size:20upx;
	}
</style>
